<template>
  <div ref="container" class="container">
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  type TitleComponentOption,
  TooltipComponent,
  type TooltipComponentOption,
  GridComponent,
  type GridComponentOption
} from 'echarts/components';
import { LineChart, type LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

const container = ref<HTMLElement | null>(null);

// 注册 ECharts 组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | LineSeriesOption
>;

const props = defineProps(['height', 'data', 'title', 'dataName'])


nextTick(() => {
  if (container.value) {
    container.value.style.height = props.height + 'px'
    let myChart = echarts.init(container.value)
    let option: EChartsOption;



    option = {
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },
      title: {
        left: 'center',
        text: props.title
      },
      xAxis: {
        type: 'time',
        boundaryGap: [0, 0]
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
      },
      series: [
        {
          name: props.dataName,
          type: 'line',
          smooth: false,
          symbol: 'none',
          areaStyle: {},
          data: props.data
        }
      ]
    };

    option && myChart.setOption(option);
  }
});

</script>

<style scoped lang="less">
.container {
  width: 100%;
  overflow: hidden;
}
</style>
